<template>
  <div class="search-result-box">
    <div class="header-info">"{{ this.$route.query.content }}" 搜索结果</div>
    <search-book-item :books="books"></search-book-item>
  </div>
</template>

<script>
import searchBookItem from '@/components/search-book-item'
import api from '@/fetch/api.js'
// import mockBooks from '@/mock/books.json'
export default {
  data () {
    return {
      books: []
    }
  },
  mounted () {
    this.searchFiction()
  },
  methods: {
    searchFiction () {
      const data = {
        condition: this.$route.query.content,
        type: 1,
        origin: 'bqb'
      }
      api.searchFiction(data).then((resp) => {
        console.log(resp.data)
        if (resp.data != null && resp.data.code === 200 && resp.data.data != null) {
          this.books = resp.data.data.books
        }
      })
    }
  },
  components: {
    searchBookItem
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "~@/styles/index.less";
@import "~@/styles/variable.less";
.search-result-box {
  background: @tab-general-bg-color;

  .header-info {
    text-align: left;
    margin: 10px;
    font-size: 12px;
  }
}
</style>
